<template>
  <div class="map">
    <center>
      <div
        id="charts2"
        ref="charts2"
        :style="{ width: '1000px', height: '800px' }"
      ></div>
      <div>
        <button @click="getData" >发送请求</button>
      </div>
    </center>
  </div>
</template>
<script>
import "echarts/map/js/china"; //中国地图
export default {
  name: "Map",
  data() {
    return {
      data: [],
    };
  },
  mounted() { //初始化页面进入
    this.getData();
  },
  methods: {
    // 初始化数据
    init() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.charts2);
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "入门示例",
          x: "center",
          textStyle: {
            color: "#f60",
          },
        },
        toolbox: { //下载刷新
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 200, //颜色渐变最小值
          max: 4000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "城市名：{b} <br/> 学员数量：{c} ",
        },
        series: [
          //数据
          {
            name: "学员",
            type: "map",
            map: "china",
            data: this.data,
            label: {
              //文字样式
              show: true,
              color: "red",
              fontSize: 10,
            },
            itemStyle: {
              //区域样式
              borderColor: "green",
            },
            zoom: 1.2, //当前视角的缩放比例
            emphasis: {
              //高亮状态下的多边形和标签样式
              label: {
                show: true,
                color: "#fff",
                fontSize: 12,
              },
              itemStyle: {
                //区域样式
                borderColor: "aque",
                areaColor: "green",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 模拟请求发送
    getData() {
      this.$http({
        method: "get",
        url: "/static/city.json",
      })
        .then((response) => {
          console.log(response);
          this.data = response.data.data;
          this.init(); //调用初始化地图方法
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>